import React from 'react';
import styles from './index.less';
import { Form, ConfigProvider, Select } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { useSetState, useDebounceFn } from 'ahooks';
import * as echarts from 'echarts';
import moment from 'moment';

import { HttpCode } from '#/utils/contacts.js';
import { Pointer, PageLoading, TRDefault } from '@/components/index.js';
import { kLineOptions } from '@/pages/ETrade/MediumAndLongTermMarket/constant.js';
import { getMarketSituation } from '@/pages/ETrade/MediumAndLongTermMarket/services.js';
import { ChartSteamCoalMarket } from '../Charts/index.js';

const SteamCoalMarket = (props: any) => {
  const { provinceId, remSize, unitId, kLine, steamCoal, steamCoalOptions } = props;
  const [form] = Form.useForm();
  const [loading, setLoading] = React.useState(true),
    [steamCoalMarket, setSteamCoalMarket] = React.useState<any>(),
    [state, setState] = useSetState<any>({
      refData: [],
    });

  React.useEffect(() => {
    form.submit();
  }, []);

  /** 建立echarts链接 */
  const getRef = (refData: any) => {
    const arr = [...state.refData];
    state.refData.push(refData);
    arr.push(refData);
    if (arr.length >= 2) {
      echarts.connect([...arr]);
    }
    setState({
      refData: arr,
    });
  };

  const getSteamCoalMarket = async (values: any) => {
    setLoading(true);
    setSteamCoalMarket(null);
    const res = await getMarketSituation(values?.steamCoal?.label);
    if (res?.statusCode === HttpCode.SUCCESS) {
      if (!res.data?.length) return;
      const data = res.data;
      setSteamCoalMarket({
        XAXIS: data.map((t: any) => moment(t.date).format('YYYYMMDD')),
        openingPrice: data.map((t: any) => t.open),
        closingPrice: data.map((t: any) => t.close),
        highestPrices: data.map((t: any) => t.high),
        lowestPrices: data.map((t: any) => t.low),
      });
    }
    setLoading(false);
  };

  const _onFinish = useDebounceFn(
    (values: any) => {
      getSteamCoalMarket(values);
    },
    { wait: 500 },
  );
  const initialValues = () => ({
    steamCoal: steamCoalOptions.find((t: any) => t.label === steamCoal),
  });
  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.container}>
        <div className={styles.header}>
          <Form
            form={form}
            initialValues={initialValues()}
            className={styles.formStyles}
            onFinish={_onFinish.run}
            onValuesChange={() => {
              form.submit();
            }}
          >
            <Form.Item name="steamCoal" className={styles.cell_item}>
              {/* <Pointer className={styles.font} options={kLineOptions} data={kLine} /> */}
              <Select
                labelInValue
                style={{ width: 260 }}
                options={steamCoalOptions}
                showSearch={false}
                showArrow={true}
              />
            </Form.Item>
          </Form>
        </div>
        {loading ? (
          <PageLoading />
        ) : (
          <div className={styles.content}>
            {steamCoalMarket?.XAXIS?.length ? (
              <>
                <div className={styles.toptip}>元/吨</div>
                <ChartSteamCoalMarket
                  data={steamCoalMarket}
                  scale={remSize / 100}
                  getRef={getRef}
                />
              </>
            ) : (
              <TRDefault type="emptysm" />
            )}
          </div>
        )}
      </div>
    </ConfigProvider>
  );
};

export default SteamCoalMarket;
